<?php

//include_once 'header.php';
?>

<script>
    function liveSearch(str) {
      if(str.length == 0){
            //$("#livesearch").text("");
            sortBy(1);
            return;
      }
      var obj = sendRequest("taskFunctions.php?cmd=3&st="+str+"&sf=1");
        if(obj.result == 1){
            displayTasks(obj);
        }else if(obj.result == 0){
            $('#livesearch').text(obj.result);
        }
    }
    
    
    
    function getXMLHttp(){
        if (window.XMLHttpRequest) {
          // code for IE7+, Firefox, Chrome, Opera, Safari
          xmlhttp=new XMLHttpRequest();
        } else {  // code for IE6, IE5
          xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        return xmlhttp;
    }
    
    function getTasksAdd(){
            $("#content_area").slideDown();
            $("#content_area").load('tasksadd.php');
    }
    
    function getAllTasks() {
        xmlhttp = getXMLHttp();
        
        xmlhttp.onreadystatechange=function() {
          if (xmlhttp.readyState==4 && xmlhttp.status==200) {
            document.getElementById("livesearch").innerHTML=xmlhttp.responseText;
           
          }
        }
        xmlhttp.open("GET","taskFunctions.php?cmd=3",true);
        xmlhttp.send();
    }
    
    function updateTask(id){
        $("#content_area").show();

        xmlhttp = getXMLHttp();
        
        xmlhttp.onreadystatechange=function() {
          if (xmlhttp.readyState==4 && xmlhttp.status==200) {
            document.getElementById("content_area").innerHTML=xmlhttp.responseText;
           
          }
        }
        xmlhttp.open("GET","taskFunctions.php?cmd=6&id="+id,true);
        xmlhttp.send();
    }
    
    
    
    function start(id){
        $("#content_area").show();

        xmlhttp = getXMLHttp();
        
        xmlhttp.onreadystatechange=function() {
          if (xmlhttp.readyState==4 && xmlhttp.status==200) {
              $('#status').fadeIn(1000).fadeOut(2000);
            document.getElementById("status").innerHTML=xmlhttp.responseText;
           
          }
        }
        xmlhttp.open("GET","taskFunctions.php?cmd=7&id="+id,true);
        xmlhttp.send();
    }
    
    function complete(id){
        $("#content_area").show();

        xmlhttp = getXMLHttp();
        
        xmlhttp.onreadystatechange=function() {
          if (xmlhttp.readyState==4 && xmlhttp.status==200) {
              $('#status').fadeIn(1000).fadeOut(2000);
            document.getElementById("status").innerHTML=xmlhttp.responseText;
           
          }
        }
        xmlhttp.open("GET","taskFunctions.php?cmd=8&id="+id,true);
        xmlhttp.send();
    }
    
    function sortBy(q){
        var obj = sendRequest("taskFunctions.php?cmd=4&q="+q);
        if(obj.result == 1){
            displayTasks(obj);
        }
    }
    
    function viewTask(id){
        
       $("#content_area").slideDown();
        
        var obj = sendRequest("taskFunctions.php?cmd=6&id="+id);
        if(obj.result == 1){
            displayTaskDetails(obj);
        }
    }
    
    function displayTaskDetails(obj){
        var i = 0;
        var table ="<div id='task_details'>";
        table += "<h2>Task Details</h2>";
        table += "<table>";
        table += "<tr><td class='title'><span class='ti-user'></span>Assigned To:</td>\n\
            <td class='value'>"+obj.tasks[i].nurse_fname + " "+obj.tasks[i].nurse_sname+"</td></tr>";
        table += "<tr><td class='title'><span class='ti-agenda'></span>Task:</td>\n\
            <td class='value'>"+obj.tasks[i].description+"</td></tr>";
        table += "<tr><td class='title'><span class='ti-calendar'></span>Date Assigned:</td>\n\
            <td class='value'>"+obj.tasks[i].date+"</td></tr>";
        table += "<tr><td class='title'><span class='ti-alarm-clock'></span>Due Date:</td>\n\
            <td class='value'>"+obj.tasks[i].due_date+"</td></tr>";
        table += "<tr><td class='title'><span class='ti-stats-up'></span>Date Started:</td>\n\
            <td class='value'>"+obj.tasks[i].date_started+"</td></tr>";
        table += "<tr><td class='title'><span class='ti-check-box'></span>Date Finished:</td>\n\
            <td class='value'>"+obj.tasks[i].date_finished+"</td></tr>";
        table += "<tr><td class='title'><span class='ti-bar-chart'></span>Status:</td>\n\
            <td class='value'>"+obj.tasks[i].task_status+"</td></tr>";
        table += "<tr><td class='title'><span class='ti-signal'></span>Priority:</td>\n\
            <td class='value'>"+obj.tasks[i].priority+"</td></tr>";
            
                 
        table += '</table></div';       
        $('#content_area').html(table);
        $('#content_area').show();
    }
    
    function viewByDue(){
        $("#over_due").slideToggle();

        xmlhttp = getXMLHttp();
        
        xmlhttp.onreadystatechange=function() {
          if (xmlhttp.readyState==4 && xmlhttp.status==200) {
            document.getElementById("over_due").innerHTML=xmlhttp.responseText;
           
          }
        }
        xmlhttp.open("GET","taskFunctions.php?cmd=11",true);
        xmlhttp.send();
    }
    
    function deleteTask(id,span){
        
        var obj = sendRequest("taskFunctions.php?cmd=2&id="+id);
        if(obj.result == 1){
            showStatus( obj);
            deleteDiv(span);
        }else{
           showStatus(obj); 
        }

    }
    
    function deleteDiv(span){
        var row = $(span).closest('div').parent('div');
            row.fadeOut(400, function(){
                    row.remove();
        });
    }
    
    function update(id){
        $("#content_area").slideDown();
        $("#content_area").load('taskupdate.php?id='+id); 
    }
    
    
    
    function toggleSort(){
        $('#sort_menu').slideToggle();
    }
    
    $('document').ready(function(){
        $('#sort_menu').hide();
        $('#over_due').hide();
        sortBy(1);
        hideControls();
    });
    
    function displayTasks(obj){
        
        var i = 0;
        var table ='<div id="tasks_list">';
        for(; i < obj.tasks.length; i++){
            table += '<div class="ind_task" >';  
            table += '<div class="task_control"><input type="checkbox" onselect="viewTask('+obj.tasks[i].task_id+'")><span class="ti-trash" onclick=deleteTask('+obj.tasks[i].task_id+',this)></span></div>';
            table += '<div onclick="viewTask('+obj.tasks[i].task_id+')"><h3>&nbsp;&nbsp;<span class="assigned_to">';
            table += obj.tasks[i].nurse_fname + " "+obj.tasks[i].nurse_sname+'</span></h3>';
            table += '<div>&nbsp;&nbsp;'+ obj.tasks[i].due_date;
            table += ' </div>';
            table += '    <p>&nbsp;&nbsp;<span>'  + obj.tasks[i].description +'</span><p></div></div>';
            
        }          
        table += '</div';       
        $('#livesearch').html(table);
        $('#livesearch').show();
        hideControls();
    }
    
    function hideControls(){
        $("input[type='checkbox']").hide();
        $(".ind_task .ti-trash").hide();
        
        $(".ind_task").mouseover(function(){
            $(this).find("input[type='checkbox']").show();
            $(this).find(".ti-trash").show();
        });
        
        $(".ind_task").mouseout(function(){
           $(this).find("input[type='checkbox']").hide(); 
            $(this).find(".ti-trash").hide();
        });
    }
    
    
</script>
<div class="container">
    <h1>Tasks</h1>
    <div id="dash">
        <span class=ti-plus onclick="getTasksAdd()"></span>
        <span class=ti-calendar onclick="viewByDue()"></span>
        <span class=ti-pencil onclick="getAllNurses()"></span>
        <span class=ti-trash onclick="getAllNurses()"></span>
        <div id='sort'>
            Sort: <span class='ti-angle-down' onclick='toggleSort()'></span>
        </div>
        <div id="search">
            <input type="text" type="text" name="st" size="40" max-size="60" 
                   onkeyup="liveSearch(this.value)">
            <span class="ti-search"></span>
        </div>
    </div>
    
    

<div id="status_content">
    <h2>status message 
        <span class="ti-arrow-circle-down" onclick="toggleStatus()">

        </span></h2>
    <div id="status"></div>                                        
</div>
    
    <div id='sort_menu'>
        <div onclick="sortBy(1)"><span class="ti-alarm-clock"></span> Due Date</div>
        <div onclick="sortBy(2)"><span class="ti-bell"></span> Priority</div>
    </div>
    
    <div id='over_due'>
        <h2>Overdue:</h2>
        <div class="tasks_overdue">
            <h3>Visit Ward 3 <span class="days_overdue">1 Day</span></h3>
            <p><span>Due: 2015-03-03</span><p>
        </div>
        <div class="tasks_overdue">
            <h3>Visit Ward 3 <span class="days_overdue">1 Day</span></h3>
            <p><span>Due: 2015-03-03</span><p>
        </div>
    </div>
    
<div id="divContent">
    
    <table id="task_pane">
        <tr>
            <td class="tasks_preview">
            <div id="displayArea">
                <h2>Tasks: </h2>
                <div id="livesearch">
                    
                </div>
            </div>
            </td >
            <td class="task_details" onr>
                <h2><span class="ti-angle-down" onclick="hideForm(0)"></span></h2>
                <div id="viewArea">
                    <div id="content_area" ></div>
                </div>
            </td>
        </tr>
    </table>
    </div>
    
</div>



